<template>
  <div id="app">
    <router-view style="height: 100%;"/>
    <!--<transition name="fade">
      <div v-if="isShow" class="mask-wrap">
        <div class="guanggao" style="background: #007AFF;">123</div>
        <div class="mask-div" @click="isShow = false"></div>
      </div>
    </transition>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isShow: false
    }
  },
  created: function () {
    console.log(this)
    let times = setInterval(() => {
      this.isShow = true
      clearInterval(times)
    }, 500)
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
body, html{
  margin: 0;
  padding: 0;
  color: #303133;
  overflow: scroll;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, footer, header, nav, section, time, mark, audio, video{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: not-allowed;
}
::-webkit-scrollbar{
  display:none;
}
a{
  text-decoration: none;
  color: #303133;
  cursor: not-allowed;
}
input{
  border: none;
  background: transparent;
  display: inline-block;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  outline: none;
  border-bottom: 1px solid #DCDFE6;
  font-size: .6rem;
}
ul{
  list-style: none;
}
img{
  vertical-align: middle;
}
#app {
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  background: #f7f8f8;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.margin-right-20{
  margin-right: 1rem;
}
.margin-left-20{
  margin-left: 1rem;
}
.fade-enter-active, .fade-leave-active {
  transition: all .2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(5rem);
}
.mask-wrap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mask-div{
  background: rgba(0, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}
.guanggao{
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
}
</style>
